<template>
<view class="main-container">
	<view class="form-group2">
		<view class="form-label">产品名称<view class="require">*</view></view>
		<view class="form-control"><input v-model="product.name" placeholder="输入产品名称"/></view>
	</view>
	<view class="form-group2">
		<view class="form-label">价格<view class="require">*</view></view>
		<input class="form-control" type="digit" v-model="product.price" placeholder="请输入价格"/>
	</view>
	<view class="form-group2">
		<view class="form-label">备注</view>
		<view class="form-control"><input v-model="product.remark" placeholder="备注信息,选填"/></view>
	</view>
	<view class="form-group2">
		<view class="form-label">状态</view>
		<view class="form-control">
			<radio-group @change="statusRadioChange">
				<label class="single-label" v-for="(item, index) in statusList" :key="item.value">
					<radio :value="item.value" :checked="item.value === product.status" /> {{item.name}}
				</label>
			</radio-group>
		</view>
	</view>
	<view class="form-group2">
		<view class="form-label">预约标识</view>
		<view class="form-control">
			<radio-group @change="prebookRadioChange">
				<label class="single-label" v-for="(item, index) in prebookList" :key="item.value">
					<radio :value="item.value" :checked="item.value === product.canPrebook" /> {{item.name}}
				</label>
			</radio-group>
		</view>
	</view>
	<view class="opt-view">
		<view class="add-opt" @click="onSaveProduct()">确定保存</view>
	</view>
	
</view>
</template>

<script>
var that;
export default {
	data() {
		return {
			product: {
				status: "1",
				canPrebook: '0'
			},
			statusList: [{name: "启用", value: "1"}, {name: "停用", value: "0"}],
			prebookList: [{name: "可预约", value: "1"}, {name: "不可预约", value: "0"}],
			hasSubmit: false,
			productId: 0,
		}
	},
	onLoad(options) {
		that = this;
		that.productId = options.id;
		that.loadData();
	},
	methods: {
		loadData: function() {
			that.$request.get("/product/onAddProduct", {productId: that.productId}).then((res) => {
				// console.log("---------->>>", res)
				if(res.data && res.data.id>0) {
					that.product = res.data;
				}
			})
		},
		onSaveProduct: function() {
			let data = that.product;
			if(!data.name || data.name.length<1) {
				this.$common.showNormalToast("产品名称长度不能低于1")
			}else if(isNaN(data.price) || data.price<0) {
				this.$common.showNormalToast("价格不能小于0")
			} else {
				// console.log(data)
				that.$request.get("/product/saveProduct", data, {method: "post"}).then((res) => {
					if(res.code==0) {
						this.$common.showNormalToast("保存成功");
						uni.navigateTo({
							url: "/pages/product/list"
						})
					} else {
						this.$common.showNormalToast(res.msg);
					}
				})
			}
		},
		statusRadioChange: function(val) {
			// console.log("==========", val)
			that.product.status = val.detail.value;
		},
		prebookRadioChange: function(val) {
			that.product.canPrebook = val.detail.value;
		}
	}
}
</script>

<style lang="scss">
.main-container {
	padding-top: 40rpx; padding-bottom: 150rpx;
}

.card-type-list {
	display: inline;
	
	.card-type {
		display: inline; padding: 6rpx 20rpx; border:1px #ddd solid; border-width: 1px 0 1px 1px; font-size: 24rpx; background:#f4f4f4;
	}
	.card-type:last-child {
		border-right: 1px #ddd solid;
	}
	.card-type.current {
		background:#ef7a01; color:#FFF;
	}
}

.card-main {
	width: 100%;
}
.single-card-view {
	border:1px red solid; width: calc(100% - 80rpx);
	background:#fdfdfd; border:1px #ddd solid; border-radius: 10rpx;
	box-shadow: 0px 0px 3px 3px #e0e0e0; margin-top: 24rpx;
	padding: 20rpx; margin: 20rpx;
	
	.title {
		border-bottom: 1px #ddd solid; padding-bottom: 20rpx; margin-bottom: 20rpx;
	}
	.field-show {
		display: inline-flex; width: 100%; padding: 10rpx 0px;
		
		.label {
			width: 180rpx; text-align: right; font-size: 28rpx; color:#333; padding-right: 10rpx;
		}
		.value {
			font-size: 30rpx; color:#111; padding-right: 10rpx;
		}
	}
}
.single-card-view.current {
	border:1px #ef7a01 solid; box-shadow: 0px 0px 3px 3px #e09807; background:#fffbf6;
}

.opt-view {
	position: fixed; bottom: 20rpx; width: calc(100vw - 4%); padding: 20rpx 2%; margin-left: -2%; border-top: 1px #ddd solid; background:#f6f6f6;
	bottom: 0px; padding-bottom: 40rpx;
	
	.add-opt {
		letter-spacing: 12rpx; width: 80%; margin-left: 10%; padding: 20rpx 0px; text-align: center; border-radius: 20rpx; background:#ef7a01; color:#FFF;
	}
}
.single-label {
	margin-left: 24rpx; color:#666; font-size: 30rpx;
}
</style>
